<template>
    <div>
         <el-tabs v-model="activeName" @tab-click="handleClick">
         <!-- 未读 -->
    <el-tab-pane :label="'未读消息'+'('+list.length+')' " name="first">
        <!-- 表格 -->
    <ul>
        <li v-for="item,index in list" :key="index" >
            <span class="one" style="width: 55%;">{{item.title}}</span>
            <span class="two" style="width: 30%;">{{item.date}}</span>
            <span class="three" style="width: 25%;" >
                    <el-button @click="yidu(item)">标为已读</el-button>            
            </span>
        </li>
    </ul>
    <el-button @click="allyd">全部标为已读</el-button>
    </el-tab-pane>
    <!-- 已读 -->
    <el-tab-pane :label="'已读消息'+'('+yid.length+')'" name="second">
        <ul>
        <li v-for="item,index in yid" :key="index" >
            <span class="one" style="width: 55%;">{{item.title}}</span>
            <span class="two" style="width: 30%;">{{item.date}}</span>
            <span class="three" style="width: 25%;">
            <el-button @click="hsz(item)">删除</el-button>
                    <el-button @click="weidu(item)">还原未读</el-button>            
            </span>
        </li>
    </ul>
    <el-button @click="alls">全部删除</el-button>
    </el-tab-pane>
    <!-- 回收站 -->
    <el-tab-pane :label="'回收站'+'('+hszz.length+')'" name="third">
         <ul>
        <li v-for="item,index in hszz" :key="index" >
            <span class="one" style="width: 55%;">{{item.title}}</span>
            <span class="two" style="width: 30%;">{{item.date}}</span>
            <span class="three" style="width: 25%;" >
            <el-button @click="hy(item)">还原</el-button>
            </span>
        </li>
    </ul>
    </el-tab-pane>
  </el-tabs>

  
    </div>
</template>
<script>
import {mapState} from'vuex'
import data from '../assets/tabs.json'
export default {
    data() {
        return {
             activeName: 'second',
             list:data.unread,
             
        }
    },
    computed:{
        ...mapState(['yid']),
        ...mapState(['hszz'])
    },
    methods: {
        //回收站还原、
        hy(item){
            console.log(item);
            this.list.push(item)
            for (let i = 0; i < this.hszz.length; i++) {
                this.hszz.splice(i,1)                
            }
        },
        //全部删除
        alls(){
             this.yid.forEach(item => {
                    return this.$store.commit('alls',item)
            });
           this.$store.commit('kk')
        },
        //删到回收站
        hsz(item){
            this.$store.commit('hsz',item)
        for (let i = 0; i < this.yid.length; i++) {
                    if(this.yid[i].id==item.id){
                        this.yid.splice(i,1)
                    }            
            }
        },
        //还原未读
        weidu(item){
             for (let i = 0; i < this.yid.length; i++) {
                    if(this.yid[i].id==item.id){
                        this.yid.splice(i,1)
                         this.list.push(item)
                    }            
            }
       
        },
        //全部标为已读
        allyd(){
            this.list.forEach(item => {
                    return this.$store.commit('allyd',item)
            });
            this.list=[]
        },
        
        //tab
          handleClick(tab, event) {
        console.log(tab, event);
      },
      //标为已读
      yidu(item){
        console.log(item);
        this.$store.commit('yidu',item)
        for (let i = 0; i < this.list.length; i++) {
                    if(this.list[i].id==item.id){
                        this.list.splice(i,1)
                    }            
        }
      },
    },
}
</script>
<style scoped>
    li{
        font-size: 14px;
        list-style: none;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #ccc;

    }
</style>